---
title: Hexagon Background
description: A background component featuring an interactive hexagon grid.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-backgrounds-hexagon" />

## Installation

<ComponentInstallation name="components-backgrounds-hexagon" />

## Usage

```tsx
<HexagonBackground />
```

## API Reference

### HexagonBackground

<TypeTable
  type={{
    hexagonSize: {
      description: 'The size of the hexagon.',
      type: 'number',
      required: false,
      default: '75',
    },
    hexagonMargin: {
      description: 'The margin of the hexagon.',
      type: 'number',
      required: false,
      default: '3',
    },
    hexagonProps: {
      description: 'The props for the hexagon.',
      type: 'React.ComponentProps<"div">',
      required: false,
    },
    '...props': {
      description: 'The props of the GradientBackground.',
      type: 'React.ComponentProps<"div">',
      required: false,
    },
  }}
/>

## Credits

- Credits to [Denis Klak](https://codepen.io/d3nis031/pen/QWyeNYx) for the inspiration
